<template>
  <div>
    <h2>测试内容</h2>
    <div class="content-layout" @scroll="scrollListener" >
<!--    <div class="content-layout" @scroll="scrollListener" @mousedown="mousedown"  @mousemove="mousemove" @mouseup="mouseup" @mouseleave="mouseup">-->
      <ul class="copy-view">
        <li v-for="(item,index) in list" :key="index">{{ item }}</li>
      </ul>
    </div>
    <EasyRefresh :userSelect="false">
      <!-- 列表内容 -->
      <ul>
        <li v-for="(item,index) in list" :key="index">{{ item }}</li>
      </ul>
    </EasyRefresh>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    let list = Array.from({length: 20}, (x, i) => i)
    return {
      list,
      isDragging: false,
      position: {}
    }
  },
  methods: {
    onRefresh() {

    },
    loadMore() {

    },
    mousedown(e) {
      // e.stopPropagation() //阻止事件冒泡
      // e.preventDefault() //阻止发生自身事件
      this.isDragging = true
      console.log("mousedown", e.clientX, e.clientY)
      this.position.clientY = e.clientY
    },
    mousemove(e) {
      if (this.isDragging) {
        console.log("mousemove")
        // console.log("mousemove", e.clientX, e.clientY)
        if (e.clientY - this.position.clientY > 5) {
          this.$message.success("下拉")
          this.mouseup()
        }
      }
    },
    mouseup() {
      console.log("mouseup")
      this.isDragging = false
    },
    scrollListener(){
      console.log("scrollListener")
    }
  }
}
</script>

<style scoped>
.content-layout {
  width: 300px;
  height: 300px;
  overflow-y: scroll;
  background: lightgrey;
  -webkit-user-select: auto;
  -moz-user-select: auto;
  user-select: auto;
}
.copy-view {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
</style>
